<div class="body" nz-row>
  <div class="header">
    <h1>实名认证</h1>
    <p>AUTHENTICATION</p>
  </div>

  <div class="jdt-c">
    <nz-steps [nzCurrent]="current" [nzProgressDot]="progressTemplate" [nzLabelPlacement]='horizontal'>
      <nz-step nzTitle="实名认证" nzDescription=""></nz-step>
      <nz-step nzTitle="基本信息" nzDescription=""></nz-step>
      <nz-step nzTitle="认证结果" nzDescription=""></nz-step>
    </nz-steps>
  </div>

  <div class="content">

    <form nz-form class="form" [formGroup]="form" *ngIf='formType == "input"'>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-input-group [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
            <input nz-input formControlName="name" placeholder="姓名" name="name" type="text" id="name" />
          </nz-input-group>
          <ng-template #prefixTemplate>
            <img src="../../../../assets/img/smrz-page/name-icon.png" alt="">
          </ng-template>
          <nz-form-explain *ngIf="form.get('name').dirty && form.get('name').errors">
            请输入姓名</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <nz-input-group [nzSuffix]="prefixTemplatePassword" [nzPrefix]="prefixLock">
            <input nz-input formControlName="idcardNo" placeholder="身份证号码" name="idcardNo" type="text" id="idcardNo" />
          </nz-input-group>
          <ng-template #prefixLock>
            <img src="../../../../assets/img/smrz-page/id-card-icon.png" alt="">
          </ng-template>
          <nz-form-explain *ngIf="form.get('idcardNo').dirty && form.get('idcardNo').errors">
            请输入正确的身份证号码</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-control>
          <button nz-button [nzType]="'primary'" (click)="next()" [disabled]="form.invalid">下一步</button>
        </nz-form-control>
      </nz-form-item>

    </form>

    <div class="form" *ngIf='formType == "updateImg"'>
      <div class="updateImg-form">
        <div style="margin-left: -20%;margin-right: 15%;">
          <h1>上传身份证正面</h1>
          <clain-image-upload picUrl='../../../../assets/img/smrz-page/id-z.png' [(ngModel)]='idcardFrontImage'></clain-image-upload>
          <p>点击图片上传</p>
        </div>
        <div>
          <h1>上传身份证背面</h1>
          <clain-image-upload picUrl='../../../../assets/img/smrz-page/id-b.png' [(ngModel)]='idcardBackImage'></clain-image-upload>
          <p>点击图片上传</p>
        </div>
      </div>
      <div style="display: flex;">
        <button nz-button [nzType]="'primary'" (click)="back('input')">返回</button>
        <button nz-button [nzType]="'primary'" (click)="submit()">提交</button>
      </div>
    </div>

    <div class="form" *ngIf='formType == "over"'>
      <img src="../../../../assets/img/smrz-page/waiting.png" alt="">
      <h1 style="font-size:34px;margin-top: 40px;">等待审核</h1>
      <p style="font-size: 25px;color:rgba(153,153,153,1);">认证资料提交成功！请耐心等待审核，预计1个工作日内返回审核结果。 好的荣誉会收获更多机会。</p>
      <a style="font-size:25px;color:rgba(0,164,255,1);" routerLink='/pages/login'>手动返回</a>
    </div>

  </div>
</div>